<template>
  <div class="app-container" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
    <h1>目前游戏注册人数有 {{ total }}人</h1>
    <h1></h1>
    <el-card v-for="(item, index) in cardList" :key="index" style="margin: 8px;">
      <h1>{{ item[2].value }}
        <span><el-tag>注册日期:{{ getRisterDate(item[12].value ) }}</el-tag></span> &nbsp;
        <span><el-tag type="warning">{{ item[3].value }}岁</el-tag></span>&nbsp;
        <span><el-tag type="success">平台ID:{{ item[12].value }}</el-tag></span>&nbsp;
        <span><el-tag type="success">应用ID:{{ item[1].value }}</el-tag></span>
      </h1>
      <p></p>
      <el-button type="primary" @click="modifyRemark(item)">修改备注</el-button>
      <el-button type="primary" @click="jindu(item)">关卡进度</el-button>
      <el-button type="primary" @click="jinbi(item)">奖励情况</el-button>
      <el-button type="primary" @click="qiandao(item)">考勤</el-button>
      <el-button type="primary" @click="tianbiao(item)">填表</el-button>
    </el-card>
  </div>
</template>


<script>
import { listRelationship, updateRelationship } from "@/api/zuixia/relationship.js";
import { listCoins, getCoins, delCoins, addCoins, updateCoins } from "@/api/zaixia/coins";
import { listQiandao, getQiandao, delQiandao, addQiandao, updateQiandao } from "@/api/zuixia/qiandao";
import { listChuanguan, getChuanguan, delChuanguan, addChuanguan, updateChuanguan } from "@/api/zuixia/chuanguan";
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";

export default {
  name: "Person_route",
  data() {
    return {
      total: 0,
      relationshipList: [],
      cardList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        userId: null,
        name: null,
        age: null,
        educationStatus: null,
        favorites: null,
        hobbies: null,
        diagnosisDate: null,
        treatmentDuration: null,
        symptoms: null,
        currentStudyLocation: null,
        professionalRehabilitationTraining: null,
        relatedUserId: null
      },
      userInfo: {}
    };
  },
  created() {
    listUser(this.addDateRange({
      pageNum: 1,
      pageSize: 1000,
      userName: undefined,
      phonenumber: undefined,
      status: undefined,
      deptId: undefined
    }, [])).then(response => {
      this.userInfo = response.rows;
      console.log("userInfo:", this.userInfo);
      this.fetchRelationshipData();
    });

  },
  methods: {
    fetchRelationshipData() {
      listRelationship(this.queryParams).then(response => {
        this.relationshipList = response.rows;
        this.total = response.total;
        console.log("relationshipList:", this.relationshipList);
        console.log("total:", this.total);
        this.cardList = this.relationshipList.map(item => {
          return [
            { key: "id", value: item.id },
            { key: "userId", value: item.userId },
            { key: "name", value: item.name },
            { key: "age", value: item.age },
            { key: "educationStatus", value: item.educationStatus },
            { key: "favorites", value: item.favorites },
            { key: "hobbies", value: item.hobbies },
            { key: "diagnosisDate", value: item.diagnosisDate },
            { key: "treatmentDuration", value: item.treatmentDuration },
            { key: "symptoms", value: item.symptoms },
            { key: "currentStudyLocation", value: item.currentStudyLocation },
            { key: "professionalRehabilitationTraining", value: item.professionalRehabilitationTraining },
            { key: "relatedUserId", value: item.relatedUserId },
          ];
        });
      });
    },
    modifyRemark(item) {
      console.log("userid:", item[1].value);
      // 弹出弹窗询问name
      this.$prompt("请输入新名字", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "名字不能为空"
      })
        .then(({ value }) => {
          console.log("value:", value);
          let form = {
            userId: item[1].value,
            name: value
          };
          updateRelationship(form).then(response => {
            this.$message({
              type: "success",
              message: "修改成功"
            });
            this.fetchRelationshipData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    qiandao(item) {
      console.log("plantform:", item[12].value);
      // 处理签到的逻辑
      let qiandaoqueryParams = {
        pageNum: 1,
        pageSize: 1000,
        checkinId: null,
        userId: item[12].value,
        checkinTime: null,
        currentCheckinDays: null,
        currentWeek: null,
        weeklyCheckinCount: null
      };
      listQiandao(qiandaoqueryParams).then(response => {
        var qiandaoList = response.rows;
        var total = response.total;
        console.log("qiandaoList:", qiandaoList);
        console.log("total:", total);
        var content = `<p>用户 ${item[2].value} 的签到情况如下：</p>`;
        content += '<ul>';
        //倒序
        qiandaoList.reverse();
        qiandaoList.forEach(qiandao => {
          content += `<li>${qiandao.checkinTime} 签到，累计签到 ${qiandao.currentCheckinDays} 天,本周(${qiandao.currentWeek}周)共签到 ${qiandao.weeklyCheckinCount} 天</li>`;
        });
        this.$alert(content, '考勤记录', {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: action => {
            console.log('用户确认了奖励状况弹窗');
          }
        });
      });
    },
    jindu(item) {
      console.log("userid:", item[1].value);
      var jinduqueryParams = {
        pageNum: 1,
        pageSize: 1000,
        userId: item[1].value,
        checkpoint: null,
        section: null,
        round: null,
        completionTime: null,
        passDuration: null
      };

      listChuanguan(jinduqueryParams).then(response => {
        var chuanguanList = response.rows;
        var total = response.total;
        console.log("chuanguanList:", chuanguanList);
        console.log("total:", total);
        chuanguanList.reverse();
        var count = 0;
        for (let i = 0; i < chuanguanList.length; i++) {
          if (chuanguanList[i].completionTime == null) {
            continue
          }
          count++;
        }
        // 构造关卡进度信息内容
        let content = `<div style="max-height: 300px; overflow-y: auto;"><p>用户 ${item[2].value} 的关卡进度如下：</p>`;
        content += '<ul><li>总共 ' + total + ' 个关卡' + count + '个已完成</li>';
        for (let i = 0; i < chuanguanList.length; i++) {
          if (chuanguanList[i].completionTime == null) {
            continue
          }
          content += `<li>${chuanguanList[i].completionTime} 完成关卡 ${chuanguanList[i].checkpoint}-${chuanguanList[i].section}-${chuanguanList[i].round}，用时 ${chuanguanList[i].passDuration} 秒</li>`;
        }
        content += '</ul></div>';

        // 使用 Element UI 的 Dialog 组件弹出关卡进度窗口
        this.$alert(content, '关卡进度', {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: action => {
            console.log('用户确认了关卡进度弹窗');
          }
        });
      });
    },
    jinbi(item) {
      var coin_queryParams = {
        pageNum: 1,
        pageSize: 1000,
        id: null,
        userid: item[1].value,
        coins: null,
        reason: null,
        date: null
      };

      listCoins(coin_queryParams).then(response => {
        var coinsList = response.rows;
        var total = response.total;
        console.log("coinsList:", coinsList);
        console.log("total:", total);
        let count = 0;
        for (let i = 0; i < coinsList.length; i++) {
          count += coinsList[i].coins;
        }
        // 构造奖励信息内容
        let content = `<p>用户 ${item[2].value} 的目前总奖励为：${total} 枚</p>`;
        content += '<ul>';
        coinsList.forEach(coin => {
          content += `<li>${coin.date} 获得 ${coin.coins} 奖励 (${coin.reason})</li>`;
        });
        content += '</ul>';

        // 使用 Element UI 的 Dialog 组件弹出奖励状况窗口
        this.$alert(content, '奖励状况', {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: action => {
            console.log('用户确认了奖励状况弹窗');
          }
        });
      })
    },
    getRisterDate(userpid) {
      let dataset = this.userInfo;
      for (let i = 0; i < dataset.length; i++) {
        if (dataset[i].userId == userpid) {
          // console.log("dataset[i].userId:", dataset[i].userId);
          return dataset[i].createTime;
        }
      }
      return "未知";
    },
    tianbiao(item) {
      console.log(item);
      // 遍历key value
      let content = `<p>用户 ${item[2].value} 的信息如下：</p>`;
      content += '<ul>';
      for (let i = 1; i < item.length; i++) {
        content += `<li>${item[i].key} : ${item[i].value}</li>`;
      }
      content += '</ul>';
      this.$alert(content, '用户信息', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        callback: action => {
          console.log('用户确认了用户信息弹窗');
        }
      });


    }
  }
};
</script>
